<template>
  <div class="apply-detail">
      <div class="top">
        <div class="top-line">
            <div class="left">
                <div class="sub-title">
                    <span>计量申请：{{ info.id }}</span>
                </div>
                <div class="tag">
                    <StateTag :id="info.status"></StateTag>
                    <span v-if="info.status === 1" style="font-size: 14px;">（待{{ info.currentApprover.approverLevel }}级审批）</span>
                </div>
            </div>
            <!-- 详情操作按钮 -->
            <div v-if="pageType === 'detail'" class="right">
                <!-- 待提交 -->
                <div v-show="info.status === 0 " style="flex">
                    <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_c89_d434_2' }" type="second" @click="handleEdit(info.id)"> 编辑 </BaseButton>
                    <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_d433_e33_2' }" type="danger" @click="handleDelete(info.id)"> 删除 </BaseButton>
                </div>
                <!-- 审批中 -->
                <div v-show="info.status === 1" style="flex">
                    <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_d433_e34_2' }" @click="handlewithDraw(info.id)"> 撤销计量申请 </BaseButton>
                </div>
                <!-- 已撤销 -->
                <div v-show="info.status === 4" style="flex">
                    <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_c89_d434_2' }" type="second" @click="handleEdit(info.id)"> 编辑 </BaseButton>
                    <BaseButton v-permission="{ btnCode: 'dlyh_d433_e35_2' }" @click="handleSubmit(info.id)"> 提交审批 </BaseButton>
                    <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_d433_e33_2' }" type="danger" @click="handleDelete(info.id)"> 删除 </BaseButton>
                </div>
                <!-- 审批通过 -->
                <div v-show="info.status === 2" style="flex">
                    <BaseButton v-permission="{ btnCode: 'dlyh_d433_e36_2' }" @click="handleExport(info.id)"> 导出审批单 </BaseButton>
                </div>
                <!-- 审批驳回 -->
                <div v-show="info.status === 3" style="flex">
                    <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_c89_d434_2' }" type="second" @click="handleEdit(info.id)"> 编辑 </BaseButton>
                    <BaseButton v-permission="{ btnCode: 'dlyh_d433_e35_2' }" @click="handleSubmit(info.id)"> 提交审批 </BaseButton>
                </div>
            </div>
            <!-- 审批操作按钮 -->
            <div v-if="pageType === 'approve' && isApproveNode() && info.status === 1" class="right">
                <!-- 审批驳回 -->
                <div style="flex">
                    <BaseButton v-permission="{ btnCode: 'dlyh_c90_d437_2' }" type="second" @click="handleReject(info.id)"> 审批驳回 </BaseButton>
                    <BaseButton v-permission="{ btnCode: 'dlyh_c90_d437_2' }" @click="handleApprove(info.id)"> 审批通过 </BaseButton>
                </div>
            </div>
        </div>
        <div class="bottom-line">
            <div class="item">项目名称：{{ info.projectName }}</div>
            <div class="item">施工单位：{{ info.constructionUnitName }}</div>
            <div class="item">监理单位：{{ info.supervisorName }}</div>
        </div>
      </div>
      <!-- 审批步骤,全部放开了 -->
      <div class="step">
          <div class="approve-step">
              <div 
              v-for="(item,index) in info.approvalProcessList"  
              :key="`approve-step-${index}`" 
              :class="[
                  'step-item', 
                  item.finished ? 'step-item-active':'step-item-normal', 
                  item.description==='审批中止'?'step-item-broke':'', item.description==='审批驳回'?'step-item-reject':''
              ]"
              >
                  {{ item.description }}
                  <div class="info">
                      <div class="username">{{ item.operatorName }}</div>
                      <div class="departname">{{ item.operatorOrgName }}</div>
                  </div>
              </div>
            
              <!-- 审批中 -->
              <div v-if="info.status === 1 " :key="info.approvalProcessList.length" :class="['step-item','step-item-normal']">审批完成</div>
              <!-- 审批通过 -->
              <div v-if="info.status === 2" :key="info.approvalProcessList.length" :class="['step-item', 'step-item-active']">审批完成</div>
          </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="0">
              <BaseInfo ref="base-info" :info="info"></BaseInfo>
          </el-tab-pane>
          <el-tab-pane label="本期完成工程量" name="1">
              <CurrentPeriodQuantities ref="current-period-quantities"></CurrentPeriodQuantities>
          </el-tab-pane>
          <el-tab-pane label="清单计量汇总表" name="2">
            <MeasureSummary :id="id" ref="measure-summary" :step-btn-show="false"></MeasureSummary>
          </el-tab-pane>
      </el-tabs>
      <withDrawDialog ref="withdraw-dialog" @updateData="getDetail"></withDrawDialog>
      <Approve ref="approve" @updateData="getDetail"></Approve>
      <Reject ref="reject" @updateData="getDetail"></Reject>
      
      <!-- 无签名提示 -->
      <EsignatureTip ref="esignature-tip" :type-name="typeName"></EsignatureTip>
  </div>
</template>
<script>
import BaseInfo from './BaseInfo.vue'
// import RecordsList from './RecordsList.vue'
import { ProjectLedgerModel, UserModel } from '@/models'
import reconfirm from '@/utils/reconfirm'
import StateTag from '../components/StateTag.vue'
import withDrawDialog from '../components/WithDraw.vue'
import CurrentPeriodQuantities from './CurrentPeriodQuantities.vue'
import MeasureSummary from '../add/MeasureSummary.vue'
// 审批
import Approve from '../../metrological-approval/components/Approve.vue'
import Reject from '../../metrological-approval/components/Reject.vue'

// 导出
import { ProjectLedgerApi } from '@/api'
import downLoad from '@/utils/blob-download'
export default {
    components: {
        BaseInfo,
        CurrentPeriodQuantities,
        MeasureSummary,
        StateTag,
        withDrawDialog,
        Approve,
        Reject
    },
    data() {
        return {
            activeName: 0,
            info: {
                status: 0,
                currentApprover: {
                    approverLevel: 0
                }
            },
            id: '',
            model: new ProjectLedgerModel(),
            formData: {},
            pageType: 'detail',
            userModel: new UserModel(),
            typeName: '审批'
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.avatar || {}
        }
    },
    created() {
        const { id, pageType } = this.$route.query
        if (id) {
            this.id = id
            this.getDetail()
        }
        // detail  approve
        if (pageType) {
            this.pageType = pageType
        }
    },
    methods: {
        // 编辑
        handleEdit(id) {
            this.$router.push({
                path: './edit',
                query: {
                    id: id,
                    pageType: 'edit'
                }
            })
        },
        // 删除
        handleDelete(id) {
            reconfirm({
                text: '确定删除该计量申请单？删除后无法恢复请谨慎操作。',
                callback: () => {
                    return this.model.applicationDelete({ id }).then(() => {
                        this.$message.success('删除成功!')
                        this.$router.push({
                            path: './index'
                        })
                    })
                }
            })
        },
        // 撤销
        handlewithDraw(id) {
            this.userModel.getHasUserInfo().then(res => {
                if (!res.esignature) {
                    this.typeName = '撤回'
                    this.$refs['esignature-tip'].visible = true
                    this.$refs['reject'].signatureShowTip = false
                } else {
                    this.$refs['withdraw-dialog'].form.id = id
                    this.$refs['withdraw-dialog'].visible = true
                }
            })
        },
        // 提交
        handleSubmit(id) {
            this.model.applicationSubmit({id: id}).then(res => {
                this.$message.success('操作成功!')
                this.getDetail()
            })
        },
        // 导出审批单
        handleExport() {
            this.exportLoading = true
            const path = ProjectLedgerApi.applicationExportPath
            const params = {
                id: this.id,
            }
            downLoad(path, {...params}, '', 'Excel', () => {
                this.exportLoading = false
            })
        },
        getDetail() {
            this.model.applicationDetail({id: this.id }).then(res => {
                this.info = {
                    ...res
                }
            })
        },
        handleClick(val) {
            // 工程汇总
            if (val.name === '1') {
                this.$refs['current-period-quantities'].id = this.id
                this.$refs['current-period-quantities'].query.id = this.id
                this.$refs['current-period-quantities'].projectId = this.info.projectId
                this.$refs['current-period-quantities'].getChapterList()
            } 
            // 工程数量清单
            if (val.name === '2') {
                this.$refs['measure-summary'].id = this.id
                this.$refs['measure-summary'].getList()
            }
        },
        // 审批驳回
        handleReject(id) {
            this.userModel.getHasUserInfo().then(res => {
                if (!res.esignature) {
                    this.typeName = '审批'
                    this.$refs['esignature-tip'].visible = true
                    this.$refs['reject'].signatureShowTip = false
                } else {
                    this.$refs['reject'].form.id = id
                    this.$refs['reject'].visible = true
                }
            })
        },
        // 审批驳回
        handleApprove(id) {
            this.userModel.getHasUserInfo().then(res => {
                if (!res.esignature) {
                    this.typeName = '审批'
                    this.$refs['esignature-tip'].visible = true
                    this.$refs['reject'].signatureShowTip = false
                } else {
                    this.$refs['approve'].form.id = id
                    this.$refs['approve'].visible = true
                }
            })
        },
        // 是否是当前审批节点
        isApproveNode() {
            const userId = this.userInfo.id
            if (this.info.currentApprover) {
                if (Number(this.info.currentApprover.approverId) === Number(userId)) {
                    return true
                } else {
                    return false
                }
            } else {
                return false
            }
        },
        // 是否是当前提交的用户,  删除和撤回需限制
        isSubmitUser() {
            if (Number(this.userInfo.id) === Number(this.info.applicantId)) {
                return true
            } else {
                return false
            }
        }

    }
}
</script>
<style scoped lang="scss">

.apply-detail{
  height: 100%;
  width: 100%;
  .top{
      width: 100%;
      padding-bottom: 12px ;
      border-bottom: 1px solid rgba(131, 145, 178, 0.1);
      margin-bottom: 12px;
      .top-line{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .bottom-line{
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-top: 8px;
            .item{
                display: flex;
                margin-right: 24px;
            }
        }
      .left{
          display: flex;
          .tag{
              display: flex;
              align-items: center;
              margin-left: 32px;
          }
      }
  }
  .step{
      margin-bottom: 60px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .approve-step{
          display: flex;
          .step-item-active{
              background: #0162FF;
              color: #fff;
              
          }
          .step-item-normal{
              background: #ebe9e9;
              color: #444;
          }
          .step-item-reject{
              background: #ed4845;
              color: #fff;
          }
          .step-item-broke{
              background: #ffa60f;
              color: #fff;
          }
          .step-item:last-of-type{
              &::after{
                  display: none;
              }
          }
          .step-item:first-of-type{
              &::before{
                  display: none;
              }
          }
          .step-item{
              height: 60px;
              width: 200px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              margin-left: 30px;
              margin-right: 2px;
              // 左边裁剪
              &::before{
                  content:"";
                  display: block;
                  width: 30px;
                  height: 60px;
                  background: inherit;
                  -webkit-clip-path: polygon(0px 0px, 30px 0px ,30px 60px, 0px 60px, 30px 30px, 0px 0px);
                  clip-path: polygon(0px 0px, 30px 0px ,30px 60px, 0px 60px, 30px 30px, 0px 0px);
                  position: absolute;
                  top: 0px;
                  left: -30px;
              }
              // 右边三角
              &::after{
                  content:"";
                  display: block;
                  width: 30px;
                  height: 60px;
                  background: inherit;
                  -webkit-clip-path: polygon(0px 0px, 30px 30px, 0px 60px);
                  clip-path: polygon(0px 0px, 30px 30px, 0px 60px);
                  position: absolute;
                  top: 0px;
                  right: -30px;
              }
          }
          .info{
             position: absolute;
             color: #444;
             top: 68px;
             left: 0px;
             font-size: 14px;
             .username{
               font-weight: 600;
             }
          }
      }
  }
}

</style>
